import { ReloadOutlined, SearchOutlined } from '@ant-design/icons';
import type { RadioChangeEvent } from 'antd';
import { Button, Form, Radio } from 'antd';
import React from 'react';

import ResetSessionKeysModal from './ResetSessionKeysModal';

const SearchForm = ({
  form,
  onSearch,
  onReset,
}: {
  form: any;
  onSearch: () => void;
  onReset: () => void;
}) => {
  const [isShowResetSessionKey, setIsShowResetSessionKey] = React.useState(false);
  const [showVerifyModal, setShowVerifyModal] = React.useState(false);
  const handleSelectChange = (e: RadioChangeEvent) => {
    form.setFieldsValue({
      keyType: e.target.value,
    });
    if (e.target.value === 5) {
      setIsShowResetSessionKey(true);
    } else {
      setIsShowResetSessionKey(false);
    }
    onSearch();
  };
  return (
    <>
      <Form form={form}>
        {/* 搜索框 */}
        <div
          style={{
            background: '#fff',
            marginBottom: '24px',
            marginLeft: '12px',
          }}
        >
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <Form.Item name="keyType" style={{ marginBottom: 0 }} initialValue={0}>
                <Radio.Group onChange={handleSelectChange}>
                  <Radio value={0}>SM2加密密钥</Radio>
                  <Radio value={1}>SM2签名密钥</Radio>
                  <Radio value={2}>RSA加密密钥</Radio>
                  <Radio value={3}>RSA签名密钥</Radio>
                  <Radio value={4}>密钥加密密钥</Radio>
                  <Radio value={5}>会话密钥</Radio>
                </Radio.Group>
              </Form.Item>
              {isShowResetSessionKey && (
                <Form.Item
                  name="resetSessionKey"
                  style={{ marginBottom: 0 }}
                  initialValue={0}
                >
                  <Button
                    type="link"
                    onClick={() => {
                      setShowVerifyModal(true);
                    }}
                  >
                    清空会话密钥
                  </Button>
                </Form.Item>
              )}
              {/* 按钮 */}
              <Button
                type="primary"
                icon={<SearchOutlined />}
                style={{
                  marginLeft: '15px',
                  backgroundColor: '#3367ea',
                  display: 'none',
                }}
                onClick={onSearch}
              >
                查询
              </Button>
              <Button
                icon={<ReloadOutlined />}
                style={{ marginLeft: '10px', display: 'none' }}
                onClick={onReset}
              >
                重置
              </Button>
            </div>
          </div>
        </div>
      </Form>
      <ResetSessionKeysModal visible={showVerifyModal} setVisible={setShowVerifyModal} />
    </>
  );
};

export default React.memo(SearchForm);
